Aside UI/UX

• Interface design starts with user experience (UX) research and design.
• Understand the target audience think what will create the best experience
  • Physical needs
  • Cognitive needs
  • Pleasing appearance
• Have an idea about what is most likely to work with the target audience

Aside UI/UX

• UI is user interface the focus is on the actual graphical and interactive elements of the web app
• Menus, the navigation systems, buttons, tabs ec.
• UI design is what the user uses and sees when using an application

Concept - Simplicity

• Keep the visualizations uncluttered.
• Elements of the graphic should contribute to the viewer’s understanding of the data
  • The visualization will be clearer
  • and more effective.

Simplicity - avoid too many graphics

• Excessive decorative graphics lead to distraction
  • unnecessary background images
  • ornate font styles
  • decorative borders

Simplicity - avoid too much data

• Omit data that is not relevant to the analysis or story
  • Beware of confusing the audience.
  • If you are talking about trends over time, proably shouldn’t display individual data points (use lines)
  • The extra data will not contribute to understanding the trend.

Simplicity - avoid overdoing color

• Using too many colors or very bright colors can lead to visual confusion.

• Use color to highlight significant data points

• Use color to highlight important categories

Simplicity - avoid too many dimensions

• Adding a third dimension to a visualization can complicate the interpretation.
  • Using a 3D chart where a 2D chart is acceptable may make it more difficult for others to interpret your chart/see your story.
  • Humans don’t process those kinds of images as well as they process simpler (e.g. bar chart) designs.

Simplicity - avoid unnecessary labels

• Too many labels can clutter a visualization.

• Don’t need to label every single data point

• Try grouping labels if you really need them

Concept - Balance

• Idea - the elements of a graphic have different “weights” (perception)
  • Different graphical elements have the power to draw attention differently
  • Be mindful of size, color, texture, and position

Balance - Size

• Larger elements draw more attention than smaller ones

• Therefore, label key information in larger fonts

• Plot important data with bigger markers

Balance - Color

• Bright colors and/or high contrast colors draw more attention than muted colors.
  • a bright red point on a graph will draw the eye faster than a pale blue one
• Flat color backgrounds in particular, can help to create simple designs
  • They can reduce visual clutter and distractions which helps data points, lines, and labels to stand out.
  • Can unify different elements of a visualization when there are multiple types of data representations (e.g., bars, lines, and points) in the same graphic

Balance - Complexity

• Complex graphical elements in shape or texture attract more attention than simple ones.

• A data point represented by a complex icon might stand out more than one represented by a simple circle.

Balance - Position

• Graphical elements placed in the center are often perceived as “heavier” than those near the edges.
• In the US (and other left to right reading nations) graphical elements placed in the top left area can get more attention.
• The opposite is true of nations where reading runs from right to left.

Balance - Quantity

• Many small graphical elements grouped together can collectively hold more visual weight than one large graphical element.

• This is relevant for visualizations like scatter plots and heat maps.

Concept - Alignment/Flow

• It’s not just about text

• All elements in a graphic should work together to create an organized appearance

  • This helps lead a viewer’s eye through your story/data

• Strategic placement and organization of all visual elements within a graph, dashboard, or any infographic helps clarity and cohesion.

Checklist - Alignment/Flow

• Aligning text and labels for easily correlation with values
• Titles and subtitles in a consistent position
• Multiple graphical comparisons? - use parallel axes and uniform scales if posible

Concept - Uniformity

• To help your viewer focus on interpretation and understanding your story, you reduce the cognitive load by:
• similar color schemes
• consistent axes
• recurring shapes or symbols

Considerations

Always Focus on the Message!

• Before adding additional elements:
  • ask if it helps communicate the core message
• Watch your use of White Space
  • Effective use of white space can reduce clutter
  • Effective use of white space can focus attention on the story.

Considerations

• Design a visualization so that the most important information catches the viewer’s eye first

• Then follow it with the secondary details

• This can be accomplished through good use of size, color, and placement.

• Keep the focus on the story that you are trying to “tell”

What is Shiny?

• R Shiny is used for creating interactive web applications in R. Users can change what they see using Shiny.

• Shiny is for others to interactively explore our data. Users do not need to know R.

• Shiny can be used to analyze data and create graphics and summaries - but the point is it is typically built for others.

• If your data updates, Shiny can automatically update the data. This means users always see the most current information.

How does Shiny work?

• We use R to write the code for what the Shiny app should do with the data, e.g. compute summary stats, draw graphs, etc.

• We also use R to design what the app will look like.

  • example — where the buttons, graphs, and sliders will be placed on a screen.

• The R Shiny function converts your code into a web app that can be accessed through a browser

Creating a Shiny app using RStudio

Select File-New File-Shiny Web App

Set Up - choices

Choose a name, choose a single file (app.R when just starting out), choose a location on your local drive to store your app

In RStudio

There should now be a new folder with an RStudio created demo file in it. Click on “Run App” in the source windown

In RStudio

If you run the app (green triangle icon on the upper right) the default Old Faithful Shiny app should pop up

In RStudio

You can open it in your browser to get a better look

If your team has R, library(shiny) then try

runExample("01_hello")      # a histogram
runExample("02_text")       # tables and data frames
runExample("03_reactivity") # a reactive expression
runExample("04_mpg")        # global variables
runExample("05_sliders")    # slider bars
runExample("06_tabsets")    # tabbed panels
runExample("07_widgets")    # help text and submit buttons
runExample("08_html")       # Shiny app built from HTML
runExample("09_upload")     # file upload wizard
runExample("10_download")   # file download wizard
runExample("11_timer")      # an automated timer

If your teams want to try Shiny on Webr

https://georgestagg.github.io/duckdb-flights-shinylive/

It would make a good final project for your webapp to get this running:

https://github.com/posit-dev/r-shinylive?tab=readme-ov-file

Shiny galleries

https://shiny.posit.co/r/gallery/#feature-demos

https://shiny.posit.co/r/gallery/#user-showcase

Steps/Logic of App.R

Steps/Logic of App.R (cont’d)

• Shiny apps are hierarchical and logical
• In their demo, fluidPage() function is used to create a fluid layout for Shiny web applications.
• With fluid layout the page will automatically adjust its layout to fit the size of the user’s browser window.
• This makes the user interface responsive and adaptable to different screen sizes making the Shiny app more appealing

Steps/Logic of App.R (cont’d)

Steps/Logic of App.R (cont’d)

Takeaways

• Shiny apps have a UI that accepts input and displays output

• The UI passess the input to the server

• Shiny apps have a server that receives input from the UI and generates output that is passed bak to the UI for display

• Process using shinyApp(ui = ui, server = server) at the end

Taking it all apart

• I have an example file that does nothing. It is named Shiny0_proof.R
• It exists to give you the absolute minimum that is needed to make Shiny run

In RStudio

• The blank window is correct, now we will expand on it.

Websites

• https://shiny.posit.co/ Homepage

• https://github.com/rstudio/shiny GitHub

• https://github.com/rstudio/shiny Mastering Shiny (online text)

Cheatsheet for Shiny

• In “Building an App” it lays out the structure for you.

UI Input Choices

UI Closeup (shiny1_ui_only.R)

• titlePanel() and sliderInput() notice the comma just before h1()

UI Closeup (shiny1_ui_only.R) (cont’d)

• various text control

UI Closeup Result

• Rendered Result

UI Closeup with image and bullets

UI Closeup with image and bullets result

The UI is an HTML document

Remainder of shiny1_ui_only.R

At this point

• There is no data, moving the slider just moves the slider
• There is user input being collected, but the input isn’t being processed
• The ui ends with the close parenthesis (note no comma)
• We have not given instructions to the server for output
• shinyApp(ui = ui, server = server) runs and we have a Shiny app

Build Server side with render & output

• See shiny2-ui_server_output.R
• The remainder of Shiny is rendering input then results are output.
  

UI modified

A closer look

Notes on user input and render

• Within the {} in renderPlot() is the R code that will build a histogram
• Only R code in the server portion, notice, just hist() from base R no html etc.
• Access the input values with input$
• The “num” in input$num is the value assigned to inputID in the sliderInput of the UI

render-output notes

render-output and ui together

Result

Result

Ready to Publish?

• Not that I would publish my example tonight, but I could.
• Publishing options, see publishing Shiny
• You can also have users download your app.R see this example from GitHub
• ex. runGist("8ad7b367f0d4d9947a94c5387900b2bd") make sure your Shiny app has a standard name like app.R and not my non-standard ones.
• Runs in R, need library(shiny) active

My Gist Example

• I have access to earthquake data in Southern California

• I can create a Shiny app so my users could select a specific time frame and map the earthquakes.

• They might adjust their choices to see data from different years, or click on the map to get different information about a particular are.

Running Gist

• An anonymous way to post files online, GitHub has a pasteboard at gist.github.com.
  • Copy and paste your app.R files to the gist web page.
  • SAVE the URL that GitHub gives the gist
• A user can launch the app with runGist("\<gist number\>")
• “<gist number>” is the number that appears at the end the URL

Recall Storytelling but now with tools like Shiny

• A good story is vital for making data relatable and engaging.
• Who is the audience? Who will use your creation? (e.g., executives, analysts).
• Outline the key message or story.
• Use something like Post-Its & Sharpies to help

Applying Design Features from earlier

• Clarity & focus
• You may need to guide people through your data (tabs?)
• You may need to keep their attention (size, color, etc.)
• Use a consistent design
• Start with a simple interface and elaborate

Do we have time? teams?

• Use Post-Its to map out a simple Shiny layout on a wall or board.
• Each Post-It will represent a component of your layout (chart, table, filter, etc.).
• Arrange the Post-Its to create tell a story that “flows”.
• Talk about it - can your whole team see the story?
• This is pointing us to homework 3 and your web app. Sharing a story.